<template>
    <view :style="{ '--color': color, '--back-color': $common.hexToRgba(color, 0.8) }">
        <view class="listOne" v-for="(item, index) in pageData" :key="item.goods_id">
            <image :src="$imgUrls(item.logo)" mode="aspectFill" class="headImg"></image>
            <view class="content">
                <text class="name">{{ item.shopName }}</text>
                <view class="row a-center m-top20">
                    <view class="title ellipsis_2 m-right10">{{ item.name }}</view>
                    <view class="d-flex a-center color_ff4 bold" v-if="item.price">
                        <text class="size26 m-top4">￥</text>
                        <text class="size42">{{ item.price }}</text>
                    </view>
                </view>

                <view class="row a-center m-top20">
                    <view class="tipsBox" v-if="item.snatch_price">
                        <view class="tips" v-for="(sub, sin) in item.snatch_price" :key="sin">{{ sub.text }}</view>
                    </view>
                </view>
                <view class="imgsBox" v-if="item.prove">
                    <image :src="$imgUrls(subs)" @click="$common.previewImgs(sins, item.prove)" mode="aspectFill" class="imgs" v-for="(subs, sins) in item.prove" :key="sins"></image>
                </view>

                <view class="row j-sb a-center m-top20">
                    <view class="d-flex a-center">
                        <text class="size32">库存:</text>
                        <text class="Inventory">{{ item.stock }}</text>
                    </view>

                    <view class="rob" @click="robBtn(item)">抢单</view>
                </view>
            </view>
        </view>

        <emptys v-if="!pageData.length"></emptys>
        <showModel @cancelFunc="showModal = false" goHome="0" v-if="showModal" type="2"></showModel>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        props: ['pageData'],
        data() {
            return {
                showModal: false
            };
        },
        methods: {
            robBtn(item) {
                if (!this.vid) return (this.showModal = true);
                this.toUrl(`/orderPage/order/createOrders?goods_id=${item.goods_id}&goods_num=1&snatch_id=${item.id}`);
            }
        },
        computed: {
            ...mapState(['color', 'vid', 'totalHeight'])
        }
    };
</script>

<style lang="scss" scoped>
    .listOne {
        width: 710rpx;
        background-color: #fff;
        padding: 20rpx;
        margin: 20rpx auto 0;
        border-radius: 10rpx;
        display: flex;
        .headImg {
            width: 88rpx;
            height: 88rpx;
            border-radius: 50%;
            margin-right: 20rpx;
        }
        .content {
            flex: 1;
            display: flex;
            flex-direction: column;
            .name {
                color: #000;
                font-size: 30rpx;
                font-weight: 500;
            }
            .title {
                flex: 1;
                color: #000;
                font-size: 32rpx;
                font-weight: 500;
            }
            .PrceNum {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 8rpx;
            }
            .tipsBox {
                flex: 1;
                .tips {
                    padding: 6rpx 20rpx;
                    background-color: var(--color);
                    color: #fff;
                    font-size: 26rpx;
                    display: inline-block;
                    margin: 10rpx 10rpx 0 0;
                    border-radius: 8rpx;
                }
            }

            .imgsBox {
                width: 100%;
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                row-gap: 10rpx;
                column-gap: 10rpx;
                margin-top: 20rpx;
                .imgs {
                    height: 150rpx;
                    border-radius: 8rpx;
                }
            }
            .Inventory {
                color: #333;
                font-size: 32rpx;
                font-weight: bold;
            }
            .rob {
                width: 200rpx;
                height: 80rpx;
                background-color: var(--color);
                color: #fff;
                font-size: 34rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 10rpx;
            }
        }
    }
</style>
